<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!-- vue3可以有两个script，一个专门用来配置组件名字，下一个专门用来配置数据，方法等；但两个script的语言类型必须一致 -->
<!-- <script lang="ts">
// vue3：组合式API
  export default {
    name : 'Person',
  }
</script> -->

<!-- 只有一个script，用name定义组件名，需要下载擦火箭支持npm i vite-plugin-vue-setup-extend -->
 <!-- 直接在script中写setup，不用在下面再写setup对象，且不用返回 -->
<script lang="ts" setup name="Person1">
  let name = '张三'        //注意此时的name不是响应式的
  let age = 18             //注意此时的age不是响应式的
  let tel = '13893023356'  //注意此时的tel不是响应式的

  // 方法
  function changeName(){
    name = 'zhang-san'   //这样修改name，name值修改了，但页面显示不会修改，因为他不是响应式的
  }
  function changeAge(){
    age += 1
  }
  function showTel(){
    alert(tel)
  }

</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
</style>